import React, {PureComponent} from "react";
import {InfoWindow, Map, Markers} from "react-amap";
import {AMapKey} from "../common/Contants";
import {connect} from "react-redux";

import carBluePic from "../assets/img/carsBlue.png";
import EchartComponent from "./EchartComponent";
import {MapCarMessageDialog} from "./InfoWindowComponent";

/**
 * 全局监控 地图模块
 */
class MapComponent extends PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            position: {
                latitude: 30.3093459,
                longitude: 120.35011537
            },
            showInfoWindowTag: false,
            mapCenter: {longitude: 135, latitude: 30},
            currentCarMessage: null,   //当前弹框的车辆信息

            showModalTag: false,//展示图标弹框

            plugins: [
                'Scale',
                {
                    name: 'ToolBar',
                    options: {
                        visible: false,  // 不设置该属性默认就是 true
                    },
                }
            ],

            markerEvents: {
                click: (e, marker) => {
                    console.log("标记点的点击事件");
                    console.log(marker);
                    const extData = marker.Pg.extData;
                    console.log(extData.ids);

                    const newPosition = {
                        longitude: extData.position.longitude,
                        latitude: extData.position.latitude
                    };
                    const data = extData.data;
                    console.log(newPosition);
                    this.setState((
                        {
                            showInfoWindowTag: true,
                            position: newPosition,
                            currentCarMessage: data
                        }
                    ))
                }
            }
        };

    }

    render() {

        const {carMessageArray} = this.props;

        const testArray = [];
        carMessageArray.toJS().map((item, index) => {

            //有的 会返回空 或者没有这个字段
            if (!item.latitude || item.latitude === 0 || !item.longitude || item.longitude === 0) {

            } else {
                testArray.push({
                    position: {
                        longitude: item.longitude,
                        latitude: item.latitude
                    },
                    ids: index,
                    data: item
                });
            }

            return item;


        });


        return (
            <div style={mapWrapperStyle}>

                <Map
                    amapkey={AMapKey}
                    plugins={this.state.plugins}
                    center={this.state.mapCenter}
                >
                    <Markers
                        markers={testArray}
                        render={renderMarker}
                        events={this.state.markerEvents}
                    />

                    {
                        this.state.showInfoWindowTag ? this.showInfoWindow() : null
                    }
                </Map>

                {
                    this.showDialog()
                }

            </div>
        );
    }

    showInfoWindow() {
        return (
            <InfoWindow
                position={this.state.position}
                isCustom={true}
                visible={true}
                offset={[10, -22]}
                size={{width: 280, height: 280}}
            >
                <MapCarMessageDialog
                    carData={this.state.currentCarMessage}
                    changeShowInfoWindowTag={this.setShowInfoWindowTag.bind(this)}
                    changeShowModalTag={this.setShowModalTag.bind(this)}
                />
            </InfoWindow>
        );
    }

    setShowInfoWindowTag(tag) {
        console.log("改变展示的数值 " + tag);
        const newTag = tag;
        this.setState({
            showInfoWindowTag: newTag
        })
    }

    setShowModalTag(tag) {
        this.setState({
            showInfoWindowTag: false,
            showModalTag: true,
        })
    }

    showDialog() {
        console.log('展示弹框');
        console.log(this.state.currentCarMessage);
        return this.state.showModalTag ?
            <EchartComponent carId={394} changeModalTag={this.setModalTag.bind(this)}/> : null
    }

    setModalTag() {
        this.setState({
            showModalTag: false
        })
    }

}


const renderMarker = function (extData) {


    return <img src={carBluePic} alt={"电动车图片"}/>;

};

const mapStatus = (status) => {


    return {
        carMessageArray: status.getIn(["globalReducer", "carsMessageArray"])
    };
};

export default connect(mapStatus, null)(MapComponent);


const mapWrapperStyle = {
    flex: 1,
    height: "100%",
};

